<template>
    <div>
        <!-- 搜索表单 -->
        <el-form :model="searchForm" ref="searchForm" label-width="100px">
            <el-row>
                <el-col span="9">
                    <el-form-item label="交易号">
                        <el-input v-model="searchForm.transactionId"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="5">
                    <el-form-item label="用户类型">
                        <el-select v-model="searchForm.userType">
                            <el-option label="全部" value="all"></el-option>
                            <el-option label="用户" value="user"></el-option>
                            <el-option label="商家" value="merchant"></el-option>
                            <el-option label="骑手" value="rider"></el-option>
                            <el-option label="站点" value="station"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col span="8">
                    <el-form-item label="用户昵称">
                        <el-input v-model="searchForm.nickname"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col span="8">
                    <el-form-item label="手机号码">
                        <el-input v-model="searchForm.phone"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="8">
                    <el-form-item label="时间范围">
                        <el-select v-model="searchForm.time">
                            <el-option label="近三个月" value="1"></el-option>
                            <el-option label="今年内" value="2"></el-option>
                            <el-option label="2024" value="3"></el-option>
                            <el-option label="2023" value="4"></el-option>
                            <el-option label="2022" value="5"></el-option>
                            <el-option label="2022年之前" value="6"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col span="8">
                    <el-form-item label="交易状态">
                        <el-select v-model="searchForm.transactionStatus">
                            <el-option label="全部" value="all"></el-option>
                            <el-option label="充值中" value="inProgress"></el-option>
                            <el-option label="充值成功" value="success"></el-option>
                            <el-option label="充值失败" value="failed"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col span="2">
                    <el-form-item>
                        <el-button type="success" @click="search">搜索</el-button>
                    </el-form-item>
                </el-col>
                <el-col span="2">
                    <el-form-item>
                        <el-button type="info" @click="reset">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <!-- 弹窗区域 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" width="40%">
            <span>交易号: {{ finance.transactionId }}</span><br><br>
            <span style="font-weight: bold">交易状态: {{ aujText() }}</span><br><br>
            <span>用户类型: {{ statusText() }}</span><br><br>
            <span>昵称名称: {{ finance.nickname }}</span><br><br>
            <span>手机号码: {{ finance.phone }}</span><br><br>
            <span>原账户余额: {{ finance.oldBalance }}</span><br><br>
            <span>新账户余额: {{ finance.newBalance }}</span><br><br><br>
            <span style="font-weight: bold">充值金额: {{ finance.rechargeAmount }}</span><br><br>
            <span>支付方式: {{ finance.paymentMethod }}</span><br><br>
            <span style="font-weight: bold">应付款: {{ finance.payableAmount }}</span><br><br>
            <span>创建时间: {{ finance.createTime }}</span><br><br>
            <span>付款时间: {{ finance.completeTime }}</span><br><br>
            <!-- 居中设置一个黄色方形区域 -->
            <div style="display: flex; justify-content: center; align-items: center; height: 100px; background-color: #f9a94a; color: #fff; font-size: 10px; border-radius: 5px;">
                <span>①充值中是指选择了付款方式后正在付款的情形，此情形无付款时间、无新账户余额。<br>    
                    ②充值失败是指最终没有完成付款的情形；此情形无付款时间，只显示为关闭时间。</span>
            </div>
        </el-dialog>
        <!-- 账户列表区域 -->
        <el-table :data="rechargeList" style="width: 100%; margin-top: 10px">
            <el-table-column label="交易号" width="160">
                <template #default="scope">
                    <el-link @click="openPopup(scope.row.transactionId)">{{ scope.row.transactionId }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="userType" label="用户类型" width="100">
                <template #default="scope">
                    <span v-if="scope.row.userType === 1">用户</span>
                    <span v-if="scope.row.userType === 2">商家</span>
                    <span v-if="scope.row.userType === 3">骑手</span>
                    <span v-if="scope.row.userType === 4">站点</span>
                </template>
            </el-table-column>
            <el-table-column prop="nickname" label="昵称名称" width="180" >
                <template #default="scope">
                    <span>{{ scope.row.nickname }}</span>
                    <br>
                    <span >+86&nbsp;{{ scope.row.phone  }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="rechargeAmount" label="充值金额" width="100" :formatter="formatCurrency" />
            <el-table-column prop="paymentMethod" label="支付方式" width="100">
                <template #default="scope">
                    <span v-if="scope.row.userType === 1">微信</span>
                    <span v-if="scope.row.userType === 2">支付宝</span>
                </template>
            </el-table-column>
            <el-table-column prop="payableAmount" label="应付款" width="100" :formatter="formatCurrency" />
            <el-table-column prop="originalBalance" label="账户余额" width="180" :formatter="formatCurrency">
                <template #default="scope">
                    <span>原:&nbsp;&nbsp;¥{{ scope.row.oldBalance }}</span>
                    <br>
                    <span>新:&nbsp;&nbsp;¥{{ scope.row.newBalance }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="140" />
            <el-table-column prop="completeTime" label="完成时间" width="140" />
            <el-table-column prop="status" label="状态" width="80">
                <template #default="scope">
                    <span v-if="scope.row.status === 1">充值中</span>
                    <span v-if="scope.row.status === 2">充值成功</span>
                    <span v-if="scope.row.status === 3">充值失败</span>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        />
    </div>
</template>

<script>
import { ElMessage, getRechargeList, getRechargeOne } from '@/api/rechargerecords';

export default {
    data() {
        return {
            searchForm: {
                transactionId: '',
                userType: '',
                nickname: '',
                phone: '',
                time: '',
                transactionStatus: ''
            },
            rechargeList: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            dialogFormVisible: false,
            title: '充值详情',
            finance: {
                transactionId: '',
                userType: '',
                nickname: '',
                phone: '',
                rechargeAmount: '',
                paymentMethod: '',
                payableAmount: '',
                originalBalance: '',
                newBalance: '',
                createTime: '',
                completeTime: '',
                status: ''
            }
        };
    },
    created() {
        this.search();
    },
    methods: {
        search() {
            let params = {
                transactionId: this.searchForm.transactionId,
                userType: this.searchForm.userType,
                nickname: this.searchForm.nickname,
                phone: this.searchForm.phone,
                time: this.searchForm.time,
                status: this.searchForm.transactionStatus,
                pageNum: this.currentPage,
                pageSize: this.pageSize
            };
            getRechargeList(params).then(res => {
                this.rechargeList = res.data.records;
                this.total = res.data.total;
            });
        },
        statusText() {
            if (this.finance.userType === 1) {
                return '用户';
            }
            if (this.finance.userType === 2) {
                return '商家';
            }
            if (this.finance.userType === 3) {
                return '骑手';
            }
            if (this.finance.userType === 4) {
                return '站点';
            }
            return this.finance.status.toString();
        },
        aujText() {
            if (this.finance.status === 1) {
                return '充值中';
            }
            if (this.finance.status === 2) {
                return '充值成功';
            }
            if (this.finance.status === 3) {
                return '充值失败';
            }
            return this.finance.status.toString();
        },
        reset() {
            this.searchForm = {
                transactionId: '',
                userType: 'all',
                nickname: '',
                phone: '',
                time: 'all',
                transactionStatus: 'all'
            };
            this.currentPage = 1;
            this.search();
        },
        formatCurrency(row, column, cellValue) {
            return `¥${cellValue}`;
        },
        formatPhone(row, column, cellValue) {
            return `+86 ${cellValue}`;
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.currentPage = 1;
            this.search();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.search();
        },
        openPopup(transactionId) {
            this.dialogFormVisible = true;
            getRechargeOne(transactionId).then(res => {
                this.finance = res.data;
            });
        }
    }
};
</script>

<style scoped>
.search-filter {
    margin-bottom: 10px;
}
</style>    